<!-- 127 -->
<template>
  <div class="page-wrap">
    <a-space class="common-button-group">
      <a-button
      class="t9-form-wideget-btn-default"
        type="primary"
        :loading="searchBtnLoading"
        @click="handleSearch"
        >{{ $t("common_query") }}</a-button
      >
    </a-space>
    <t-query-form
      layout="inline"
      ref="queryForm"
      group="CSTMain"
     :model="queryForm"
    >
          <a-form-item
            :label="$t('T9_shopId')"
            name="shopId"
            prop="shopId"
            :rules="{
              required: true,
              message: $t('T9_shopId'),
              trigger: 'change',
            }"
          >
            <a-select
              v-model:value="queryForm.shopId"
              class="t9-form-wideget-input-default"
              @change="changeShopId"
              :placeholder="$t('common_pleaseSelect')"
              allow-clear
            >
              <a-select-option
                v-for="item in shopIdArr"
                :key="item.shopId"
                :value="item.shopId"
              >
                {{ item.shopId }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
            :label="$t('T9_cstSpec')"
            name="cstSpec"
            prop="cstSpec"
          >
            <a-select
              v-model:value="queryForm.cstSpec"
              class="t9-form-wideget-input-default"
              @change="changeProductType"
              :placeholder="$t('common_pleaseSelect')"
              show-search
              allow-clear
              mode="multiple"
            >
              <a-select-option
                v-for="item in options.cstSpecList"
                :key="item.value"
                :value="item.value"
              >
                {{ item.value }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('T9_controlSite')" name="controlSite">
            <a-select
              v-model:value="queryForm.controlSite"
              class="t9-form-wideget-input-default"
              allow-clear
               show-search
              :placeholder="$t('common_pleaseSelect')"
            >
              <a-select-option
                v-for="item in controlSiteArr"
                :key="item.enumValue"
                :value="item.enumValue"
              >
                {{ item.enumValue }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('T9_cstState')" name="cstState">
            <a-select
              v-model:value="queryForm.cstState"
              class="t9-form-wideget-input-default"
              @change="changeOwnerType"
              allow-clear
               show-search
              :placeholder="$t('common_pleaseSelect')"
            >
              <a-select-option
                v-for="item in cstStateArr"
                :key="item.enumValue"
                :value="item.enumValue"
              >
                {{ item.enumValue }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('T9_controlOwner')" name="controlOwner">
            <a-select
              v-model:value="queryForm.controlOwner"
              class="t9-form-wideget-input-default"
              allow-clear
               show-search
              :placeholder="$t('common_pleaseSelect')"
            >
              <a-select-option
                v-for="item in controlOwnerArr"
                :key="item.enumValue"
                :value="item.enumValue"
              >
                {{ item.enumValue }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('T9_transferState')" name="transferState">
            <a-select
              v-model:value="queryForm.transferState"
              class="t9-form-wideget-input-default"
              allow-clear
               show-search
              :placeholder="$t('common_pleaseSelect')"
            >
              <a-select-option
                v-for="item in transferStateArr"
                :key="item"
                :value="item"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('T9_pitch')" name="pitch">
            <a-select
              v-model:value="queryForm.pitch"
              class="t9-form-wideget-input-default"
              allow-clear
               show-search
              :placeholder="$t('common_pleaseSelect')"
            >
              <a-select-option
                v-for="item in pitchArr"
                :key="item.enumValue"
                :value="item.enumValue"
              >
                {{ item.enumValue }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('T9_eqpId')" name="eqpId">
            <a-select
              v-model:value="queryForm.eqpId"
              class="t9-form-wideget-input-default"
              allow-clear2
               show-search
              :placeholder="$t('common_pleaseSelect')"
            >
              <a-select-option
                v-for="item in options.eqpIdList"
                :key="item.value"
                :value="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('T9_department')" name="department">
            <a-select
              v-model:value="queryForm.department"
              class="t9-form-wideget-input-default"
              allow-clear
              show-search
              :placeholder="$t('common_pleaseSelect')"
            >
              <a-select-option
                v-for="item in departmentArr"
                :key="item.enumValue"
                :value="item.enumValue"
              >
                {{ item.enumValue }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('T9_cstId')" name="cstId">
           <a-input class="t9-form-wideget-input-default" v-model:value="queryForm.cstId"  :placeholder="$t('common_pleaseEnter1')"  allow-clear />
          </a-form-item>
    </t-query-form>
    <a-row
      type="flex"
      justify="space-between"
      align="middle"
      class="global-oper-row mt-2"
    >
      <a-col :span="2" class="global-oper-row-title">{{
        $t("T9_cstList")
      }}</a-col>
      <a-col :span="2">{{ $t("T9_cstQty")}}:{{cstQty}}</a-col>
       <a-col :span="2">{{ $t("T9_l20CstQty")}}:{{ltwentyQty}}</a-col>
        <a-col :span="2">{{ $t("T9_l40CstQty")}}:{{lfortyQty}}</a-col>
      <a-col :span="16" class="global-oper-row-extra">
        <a-button class="t9-form-wideget-btn-default" :loading="exportBtnLoading" @click="getExport" type="primary">{{ $t("T9_toExcel") }}</a-button>
      </a-col>
    </a-row>
     <div class="page-wrap-table">
    <t-table align="center" :data="list.tableData"
      max-height="100%"
      :loading="searchBtnLoading">
      <t-column min-width="80" field="cstId" :title="$t('T9_cstId')" />
      <t-column min-width="80" field="eqpId" :title="$t('T9_eqpId')" />
      <t-column min-width="80" field="portId" :title="$t('T9_portId')" />
      <t-column min-width="80" field="pitch" :title="$t('T9_pitch')" />
      <t-column min-width="100" field="opeartion" :title="$t('T9_opeartion')" />
      <t-column min-width="100" field="productId" :title="$t('T9_productId')" />
      <t-column min-width="80" field="owner" :title="$t('T9_owner')" />
      <t-column min-width="100" field="glassQty" :title="$t('T9_glassQty')" />
      <t-column min-width="120" field="controlOwner" :title="$t('T9_controlOwner')" />
      <t-column min-width="100" field="cstLocState" :title="$t('T9_cstLocState')" />
      <t-column min-width="100" field="checkType" :title="$t('T9_checkType')" />
      <t-column min-width="150" field="arrayChangerPlanFlag" :title="$t('T9_arrayChangePlanFlag')" />
      <t-column min-width="100" field="holdTime" :title="$t('T9_holdTime')" />
      <t-column min-width="150" field="holdComment" :title="$t('T9_holdComment')" />
      <t-column min-width="100" field="dspFlag" :title="$t('T9_dspFlag')" />
      <t-column min-width="100" field="repairFlag" :title="$t('T9_repairFlag')" />
      <t-column min-width="120" field="transferState" :title="$t('T9_transferState')" />
      <t-column min-width="100" field="cstState" :title="$t('T9_cstState')" />
      <t-column min-width="100" field="holdState" :title="$t('T9_holdState')" />
      <t-column min-width="100" field="cleanState" :title="$t('T9_cleanState')" />
      <t-column min-width="120" field="lastComment" :title="$t('T9_lastComment')" />
      <t-column min-width="100" field="sourceEqp" :title="$t('T9_sourceEqp')" />
      <t-column min-width="160" field="destinationMachine" :title="$t('T9_destinationMachine')" />
      <t-column min-width="160" field="currentMachineName" :title="$t('T9_currentMachineName')" />
      <t-column min-width="100" field="controlState" :title="$t('T9_controlState')" />
      <t-column min-width="100" field="currentSite" :title="$t('T9_currentSite')" />
      <t-column min-width="100" field="cstSpec" :title="$t('T9_cstSpec')" />
      <t-column min-width="120" field="surceZoneName" :title="$t('T9_surceZoneName')" />
      <t-column min-width="160" field="destinationZoneName" :title="$t('T9_destinationZoneName')" />
      <t-column min-width="140" field="currentZoneName" :title="$t('T9_currentZoneName')" />
      <t-column min-width="120" field="timeUsedLimit" :title="$t('T9_timeUsedLimit')" />
      <t-column min-width="100" field="timeUsed" :title="$t('T9_timeUsed')" />
      <t-column min-width="140" field="maxUsedDaysLimit" :title="$t('T9_maxUsedDaysLimit')" />
      <t-column min-width="120" field="durationUsed" :title="$t('T9_durationUsed')" />
      <t-column min-width="100" field="capacity" :title="$t('T9_capacity')" />
      <t-column min-width="120" field="lastCleanTime" :title="$t('T9_lastCleanTime')" />
      <t-column min-width="100" field="department" :title="$t('T9_department')" />
      <t-column min-width="100" field="createUser" :title="$t('T9_createUser')" />
      <t-column min-width="100" field="createTime" :title="$t('T9_createTime')" />
      <t-column min-width="140" field="sourePositionName" :title="$t('T9_sourePositionName')" />
      <t-column min-width="170" field="destinationPositionName" :title="$t('T9_destinationPositionName')" />
      <t-column min-width="160" field="currentPositionName" :title="$t('T9_currentPositionName')" />
      <t-column min-width="200" field="transferCommandCreateUser" :title="$t('T9_transferCommandCreateUser')" />
      <t-column min-width="140" field="sampleCheckTime" :title="$t('T9_sampleCheckTime')" />
      <t-column min-width="120" field="multiOwnerId" :title="$t('T9_multiOwnerId')" />
    </t-table>
     </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
  import * as api from '@/api/common'
  import initOptionsMixin from '@/mixins/initOptionsMixin'
  import { downloadBlobFile } from '@/utils/download'

  export default defineComponent({
    name: 'CSTMain',
    mixins: [initOptionsMixin],
    data() {
      return {
        searchBtnLoading: false,
        exportBtnLoading: false,
        version: '81004',
        list: {
          tableData: []
        },
        options: {
        },
        shopIdArr: [],
        departmentArr: [],
        transferStateArr: [],
        controlSiteArr: [],
        cstStateArr: [],
        pitchArr: [],
        controlOwnerArr: [],
        cstQty: '',
        lfortyQty: '',
        ltwentyQty: '',
        queryForm: {
          shopId: 'ARRAY',
          cstSpec: [],
          controlSite: undefined,
          cstState: undefined,
          controlOwner: undefined,
          transferState: undefined,
          pitch: undefined,
          eqpId: undefined,
          department: undefined,
          cstId: undefined
        }
      }
    },
    computed: {

    },
    watch: {
      'queryForm.shopId': {
        handler(shopId) {
          this.initOptions([{ name: 'eqpId', params: { shopId, bayId: '', version: '80004' } }])
        },
        immediate: true
      }
    },
    created() {
      this.initOptions([{ name: 'cstSpec', params: { shopId: this.queryForm.shopId } }])
      this.getShopId()
      this.getDeparment()
      this.getControlSite()
      this.getTransferState()
      this.getControlOwner()
      this.getCstState()
      this.getPitch()
    },
    methods: {
      getExport() {
        if (!this.list.tableData.length) return
        if (this.exportBtnLoading) return
        this.exportBtnLoading = true
         const obj = {
          dtoName: 'CarrierMainDTO',
          queryId: 'GetCarrierList',
          version: this.version,
          menuName: 'carrierMain',
          usage: 'getCarrierMainList',
          export: true,
          ...this.queryForm,
          cstSpec: this.queryForm.cstSpec.toString(),
           cstState: this.queryForm.cstState ? this.queryForm.cstState : ''
        }
        api.getList(obj).then(res => {
          downloadBlobFile(res, 'cstList')
          this.exportBtnLoading = false
        }).catch(error => {
          this.exportBtnLoading = false
          console.log(error)
        })
      },
      handleSearch() {
        this.$refs.queryForm.validate().then(() => {
          this.getList()
        })
      },
      getList() {
         if (this.searchBtnLoading) return
            this.searchBtnLoading = true
            if (this.queryForm.cstState === 'Scrapped') {
               this.version = '81034'
            } else {
              this.version = '81004'
            }
           const obj = {
          dtoName: 'CarrierMainDTO',
          queryId: 'GetCarrierList',
          version: this.version,
          menuName: 'carrierMain',
          usage: 'getCarrierMainList',
          ...this.queryForm,
           cstSpec: this.queryForm.cstSpec.toString(),
           cstState: this.queryForm.cstState ? this.queryForm.cstState : ''
        }
        api
        .getList(obj).then((res) => {
           this.list.tableData = res.carrierMainDTOList
           this.cstQty = res.cstQty
           this.lfortyQty = res.lfortyQty
           this.ltwentyQty = res.ltwentyQty
           this.searchBtnLoading = false
        })
        .catch((error) => {
                this.searchBtnLoading = false
                console.error(error)
              })
      },
      getCstState() {
        const params = {
          enumName: 'DurableState', usage: ''
        }
        api.getCstState(params).then(res => {
          this.cstStateArr = res
          console.log(res)
        })
      },
       getControlOwner() {
        const params = {
          enumName: 'ControlOwner', usage: ''
        }
        api.getControlOwner(params).then(res => {
          this.controlOwnerArr = res
          console.log(res)
        })
      },
       getPitch() {
        const params = {
          enumName: 'CassettSettingCode', usage: ''
        }
        api.getPitch(params).then(res => {
          this.pitchArr = res
          console.log(res)
        })
      },
      getControlSite() {
         const params = {
           enumName: 'Site'
        }
        api.getControlSite(params).then(res => {
          this.controlSiteArr = res
        })
      },
       getTransferState() {
        const params = {
        }
        api.getTransferState(params).then(res => {
          this.transferStateArr = res
        })
      },
      getDeparment() {
        const params = {
        }
        api.getDepartment(params).then(res => {
          this.departmentArr = res
        })
      },
      getShopId() {
        const params = {
        }
        api.getShopId(params).then((res) => {
          this.shopIdArr = res
        })
      }
    }
  })
</script>
<style lang="less" scoped>
.t9-form-wideget-input-default {
  width: 150px;
}
</style>
